<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>数据可视化项目</title>
  <link rel="stylesheet" href="fonts/icomoon.css" />
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">
  <link rel="stylesheet" href="css/index.css" />
  <script src="js/echarts.min.js"></script>
  <script src="js/flexible.js"></script>
  <script src="js/jquery.min.js"></script>
</head>

<body>
  <!-- 父容器大盒子 -->
  <div class="viewport">
    <div class="top">
      <span>2023年就业数据分析</span>
      <img src="./images/school_logo.png" alt="" srcset="">
    </div>
    <div class="main">
      <!-- 第一列 -->
      <div class="column">
        <!-- 毕业生人数统计 -->
        <div class="graduateCount panel">
          <div class="inner">
            <h4 class="text">毕业生人数统计</h4>
            <ul class="category">
              <li class="all">
                <img src="./images/person.png" style="width: .5rem;height: .4125rem;">
                &nbsp;
                <div>
                  <span>2023</span>
                  <span>毕业生</span>
                </div>
              </li>
              <li>
                <div>
                  <span style="color: #FF8585;">2023</span>
                  <span>博士生</span>
                </div>
              </li>
              <li>
                <div>
                  <span style="color: #DF68FF;">2023</span>
                  <span>硕士生</span>
                </div>
              </li>
              <li>
                <div>
                  <span style="color: #2BFF88;">2023</span>
                  <span>本科生</span>
                </div>
              </li>
              <li>
                <div>
                  <span style="color: #FFB953;">2023</span>
                  <span>专科生</span>
                </div>
              </li>
            </ul>
          </div>

        </div>
        <!-- 学生签约行业分布 -->
        <div class="industry panel">
          <div class="inner">
            <h4 class="text">毕业生人数统计</h4>
            <!-- 柱状图1 -->
            <div id="industryEcharts" style="width: 6.25rem;height:6.65rem;"></div>
          </div>
        </div>
        <!-- 毕业去向类型分布 -->
        <div class="direction panel">
          <div class="inner">
            <h4 class="text">毕业去向类型分布</h4>
            <!-- 毕业去向类型分布饼图 -->
            <div id="direction-swiper" class="swiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="directionEcharts" style="width: 6.25rem;height:2.3rem;"></div>
                </div>
                <div class="swiper-slide">
                  <div class="directionEcharts" style="width: 6.25rem;height:2.3rem;"></div>
                </div>
                <div class="swiper-slide">
                  <div class="directionEcharts" style="width: 6.25rem;height:2.3rem;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 第二列 -->
      <div class="column">
        <!-- 各省毕业人数分布 -->
        <div class="distribution panel">
          <div class="inner">
            <h4 class="text">各省毕业人数分布</h4>
            <!-- 地图模块 -->
            <div id="mapEcharts" style="width: 10.35rem;height: 7.825rem;"></div>
          </div>
        </div>
        <!-- 入职单位性质分布 -->
        <div class="unit panel">
          <div class="inner">
            <h4 class="text">入职单位性质分布</h4>
            <!-- 折线图 -->
            <div id="unit-swiper" class="swiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="unitEcharts" style="width: 10.35rem;height:2.8625rem;"></div>
                </div>
                <div class="swiper-slide">
                  <div class="unitEcharts" style="width: 10.35rem;height:2.8625rem;"></div>
                </div>
                <div class="swiper-slide">
                  <div class="unitEcharts" style="width: 10.35rem;height:2.8625rem;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 第三列 -->
      <div class="column">
        <!-- 毕业生去向落实率统计 -->
        <div class="graduateGo panel graduateCount">
          <div class="inner">
            <h4 class="text">毕业生去向落实率统计</h4>
            <ul class="category">
              <li class="all">
                <img src="./images/person.png" style="width: .5rem;height: .4125rem;">
                &nbsp;
                <div>
                  <span>98%</span>
                  <span>毕业生</span>
                </div>
              </li>
              <li>
                <div>
                  <span style="color: #FF8585;">60%</span>
                  <span>博士生</span>
                </div>
              </li>
              <li>
                <div>
                  <span style="color: #DF68FF;">90%</span>
                  <span>硕士生</span>
                </div>
              </li>
              <li>
                <div>
                  <span style="color: #2BFF88;">98%</span>
                  <span>本科生</span>
                </div>
              </li>
              <li>
                <div>
                  <span style="color: #FFB953;">89%</span>
                  <span>专科生</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 各学院毕业去向落实率 -->
        <div class="college panel">
          <div class="inner">
            <h4 class="text">各学院毕业去向落实率</h4>
            <!-- 柱状图2 -->
            <div id="collegeEcharts" style="width: 6.25rem;height:6.65rem;"></div>
          </div>
        </div>
        <!-- 工作职位类别分布 -->
        <div class="jobCategory panel">
          <div class="inner">
            <h4 class="text">工作职位类别分布</h4>
            <!-- 工作职位类别分布饼图 -->
            <div id="jobcategory-swiper" class="swiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="jobcategoryEcharts" style="width: 6.25rem;height:2.3rem;"></div>
                </div>
                <div class="swiper-slide">
                  <div class="jobcategoryEcharts" style="width: 6.25rem;height:2.3rem;"></div>
                </div>
                <div class="swiper-slide">
                  <div class="jobcategoryEcharts" style="width: 6.25rem;height:2.3rem;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="js/index.js"></script>
    <!-- 想使用中国地图必须先引用这个china.js文件 -->
    <script src="js/china.js"></script>
    <!-- 引入我们自己的地图js文件 -->
    <script src="js/myMap.js"></script>
</body>

</html>